<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      canvas {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <input type="color" />
    <canvas></canvas>

    <script>
      const colorPicker = document.querySelector('input')
      const canvas = document.querySelector('canvas')
      const ctx = canvas.getContext('2d')

      function init() {
        const w = 500,
          h = 300
        canvas.width = w * devicePixelRatio
        canvas.height = h * devicePixelRatio
        canvas.style.width = w + 'px'
        canvas.style.height = h + 'px'
      }
      init()

      const shapes = []

      class Rectangle {
        constructor(color, startX, startY) {
          this.endX = startX
          this.endY = startY
          this.color = color
          this.startX = startX
          this.startY = startY
        }
        get minX() {
          return Math.min(this.startX, this.endX)
        }
        get minY() {
          return Math.min(this.startY, this.endY)
        }
        get maxX() {
          return Math.max(this.startX, this.endX)
        }
        get maxY() {
          return Math.max(this.startY, this.endY)
        }
        draw() {
          ctx.beginPath()
          ctx.moveTo(this.minX * devicePixelRatio, this.minY * devicePixelRatio)
          ctx.lineTo(this.maxX * devicePixelRatio, this.minY * devicePixelRatio)
          ctx.lineTo(this.maxX * devicePixelRatio, this.maxY * devicePixelRatio)
          ctx.lineTo(this.minX * devicePixelRatio, this.maxY * devicePixelRatio)
          ctx.closePath()
          ctx.fillStyle = this.color
          ctx.fill()
          ctx.strokeStyle = '#FFF'
          ctx.lineWidth = 3 * devicePixelRatio
          ctx.stroke()
        }
      }

      canvas.onmousedown = e => {
        const bouding = canvas.getBoundingClientRect()
        const rect = new Rectangle(colorPicker.value, e.offsetX, e.offsetY)
        const shape = getShape(e.offsetX, e.offsetY)
        if (shape) {
          const { startX, startY, endX, endY } = shape
          const mouseX = e.offsetX
          const mouseY = e.offsetY

          window.onmousemove = e => {
            const disX = e.clientX - bouding.left - mouseX
            const disY = e.offsetY - bouding.top - mouseY
            console.log(disX, disY)
            shape.startX = startX + disX
            shape.startY = startY + disY
            shape.endX = endX + disX
            shape.endY = endY + disY
          }
        } else {
          shapes.push(rect)
          window.onmousemove = e => {
            rect.endX = e.clientX - bouding.left
            rect.endY = e.offsetY - bouding.top
          }
        }
        window.onmouseup = e => {
          window.onmousemove = null
          window.onmousedown = null
          window.onmouseup = null
        }
      }

      function getShape(x, y) {
        for (let i = shapes.length - 1; i >= 0; i--) {
          if (
            x >= shapes[i].minX &&
            x <= shapes[i].maxX &&
            y >= shapes[i].minY &&
            y <= shapes[i].maxY
          ) {
            return shapes[i]
          }
        }
      }

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        requestAnimationFrame(draw)
        for (const shape of shapes) {
          shape.draw()
        }
      }
      draw()
    </script>
  </body>
</html>
